<template>
  <div class="goods-details" :class="(is_guige) ? 'overflow' : ''">
    <!-- 饮食介绍 -->
    <span class="img"><img class="info-img" v-if="details" :src="details.img1"></span>
    <div class="info-p">
      <p class="title">{{details.title}}</p>
      <p class="price clear">￥{{details.price}} <s>原价￥{{details.market_price}}</s></p>  
      <div class="num" @click="is_guige = !is_guige">
        <span class="tip">规格</span>
        <div class="operate">
          <p>请选择商品的规格属性</p>
          <img src="@/assets/jiantou.png" class="jiantou" alt="">
        </div>
      </div>
    </div>
    <div class="details">
      <p>商品详情</p>
      <div class="cons" v-html="details.content"></div>
    </div>
    <div class="btn">
      <span class="left" @click="addCart()">加入购物车</span>
      <span class="right" @click="gotopay">
        <img src="@/assets/shangpingxiangqing1.png">
        立即购买
      </span>
    </div>
    <div class="mask-div" v-if="is_guige">
      <div class="mask-bg" @click="is_guige = false"></div>
      <div class="content guige">
        <span class="title">规格</span>
        <div class="guige-list">
          <div class="guige-item" :class="(guige == index) ? 'active' : ''" v-for="(item, index) in details.pro_guiges" :key="index" @click="check_guige(index)">{{item.title}}</div>
        </div>
        <div class="num">
          <span class="left">数量</span>
          <div class="num-div">
            <img src="@/assets/gouwuche2.png" @click="jian" alt="">
            <span class="num">{{num}}</span>
            <img src="@/assets/gouwuche3.png" @click="jia" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { AlertModule } from 'vux'
import { getGoodsDetails, addCarts } from '@/api/api'
export default {
  components: {
  },
  data () {
    return {
      is_guige: false,
      details: {},
      guige: 0,
      num: 1,
      guigeVal: '',
    }
  },
  created () {
    this.uid = sessionStorage.getItem('uid');
    this.goodsId = this.$route.query.id
    this.get_goods_details()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    get_goods_details() {
      getGoodsDetails(this.goodsId).then((res) => {
        this.details = res.data.info
        if(this.details.pro_guiges.length != 0){
          this.guigeVal = this.details.pro_guiges[this.guige].id
        }        
      }).catch((err) => {
        console.dir(err)
      })
    },
    jian () {
      if(this.num <= 1) {
        return 
      }
      this.num--
    },
    jia () {
      this.num++
    },
    // 选择规格
    check_guige(index) {
      this.guige = index
      this.guigeVal = this.details.pro_guiges[index].id
    },
    // 加入购物车
    addCart() {
      var jsondata = {
        uid: sessionStorage.getItem('uid'),
        pro_id: this.goodsId,
        num: this.num,
        pro_guige_id: this.guigeVal
      }
      addCarts(jsondata).then((res) => {
        AlertModule.show({
          title: '温馨提示',
          content: res.data.info,
          onHide: () => {
            if(res.data.status == '0'){
              return;
            }
            this.router({path: './cart'})
          }
        })
      }).catch((err) => {
        console.dir(err)
      })
    },
    gotopay() {
      if(this.details.pro_guiges.length == 0){
        AlertModule.show({
          title: '温馨提示',
          content: '该商品暂无规格，能不能购买',
        })
        return;
      }
      let confirmCon = {
        uid: this.uid,
        ids: this.goodsId,
        is_from_cart: 0,
        num: this.num,
        guige_id: this.guigeVal,
        guige: this.details.pro_guiges[this.guige].title
      }
      this.router({path: './confirmOrder', query: {confirmCon: JSON.stringify(confirmCon)}})
    }
  }
}
</script>
<style lang="stylus" scoped>
.overflow
  height 100vh
  overflow hidden
.goods-details
    background-color #f5f5f5
    min-width 100vw
    min-height 100vh
    padding-bottom 8rem
    box-sizing border-box
    .img
      height 100vw
      width 100vw
      display flex
      img
        object-fit cover
    .info-img
      background-color #fff
    .info-p
      background-color #fff
      margin-bottom 1rem
      border-top 1px solid #e6e6e6
      padding 2rem 1.5rem
      .title
        line-height 2.4rem
        font-size 1.7rem
        color #333
      .price
        color #333333
        font-weight bold
        font-size 1.7rem
        margin-top 2.5rem
        s          
          float right
          font-size 1.2rem
          color #999
          font-weight 400
          line-height 2.5rem
      .num
        border-top 1px solid #e5e5e5
        margin-top 2rem
        display flex
        padding-top 3rem
        padding-bottom 1rem
        position relative
        .tip
          line-height 2.7rem
          font-size 1.5rem
          color #999
        .operate
          display flex
          flex 1
          position absolute
          right 0
          font-size 1.5rem
          padding-right 2.1rem
          .jiantou
            position absolute
            width .6rem
            top: .65rem;
            right: 0;
    .details
      padding 2rem 1.5rem
      background-color #fff
      p
        font-size 1.6rem
        color #333
        font-weight bold
        margin-bottom 1rem
    .btn
      display flex
      position fixed
      bottom 0
      width 100%
      height 7rem
      background linear-gradient(0deg,rgba(255,255,255,1) 0%)
      padding 1rem
      box-sizing border-box
      text-align center
      z-index 999
      .left
        max-width 13.5rem
        background-color #43A047
        width 13.5rem
        height 5rem
        line-height 5rem
        border-radius .4rem
        color #fff
        font-size 1.8rem
        margin-right 1rem
      .right
        width 21rem
        height 5rem
        line-height 5rem
        color #fff
        background-color #FE9700
        font-size 1.8rem
        border-radius .4rem
        img
          width 2.1rem
          display inline-block
          vertical-align middle
          position relative
          top -.2rem
          margin-right .5rem
    .guige      
      width 100%
      background-color #fff
      bottom 0
      border-radius 1.2rem 1.2rem 0 0
      padding 0 1.5rem
      box-sizing border-box
      padding-bottom 8rem
      .title
        line-height 1.4rem
        color #000
        font-size 1.5rem
        font-weight 500
        display block
        height 1.4rem
        padding-top 3rem
        padding-bottom 1.5rem
      .guige-list
        min-height 10.2rem
        max-height 19rem
        overflow-y auto
        .guige-item
          background-color #F5F7FA
          height 3.6rem
          line-height 3.6rem
          font-size 1.3rem
          color #999
          margin-right 1.5rem
          margin-bottom 1.5rem
          padding 0 1rem
          float left
          border-radius .4rem
        .active.guige-item
          background-color #43A047
          color #fff
      .num
        margin-top 1rem
        display flex
        .left
          color #999
          flex 1
          font-size 1.5rem
          line-height 2.7rem
        .num-div
          display flex
          img
            width 2.7rem
            height 2.7rem
          span
            height 2.7rem
            line-height 2.7rem
            width 4rem
            text-align center
            margin-top 0
            display block
</style>